﻿
@{
    ViewData["Title"] = "修改密码";
    Layout = "~/Views/Shared/_LayoutAdmin.cshtml";
    var errmsg = TempData["errMsg"];
}
<div id="app" v-clock>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" action="@Url.Action("ChangePasswd")" method="post" style="width: 60%;">
        @Html.AntiForgeryToken()
        <el-form-item label="旧密码" prop="oldPasswd">
            <el-input v-model="ruleForm.oldPasswd" size="small" class="col-6" name="oldPasswd" type="password"></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newPasswd">
            <el-input v-model="ruleForm.newPasswd" size="small" class="col-6" name="newPasswd"  type="password"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmPasswd">
            <el-input v-model="ruleForm.confirmPasswd" size="small" class="col-6" name="confirmPasswd"  type="password"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @@click="submitForm('ruleForm')" size="small">保存</el-button>
            <el-button @@click="resetForm('ruleForm')" size="small">重置</el-button>
        </el-form-item>
    </el-form>
</div>
@section Scripts
    {
    <script type="text/javascript">
        @if (errmsg!=null&&!string.IsNullOrEmpty(errmsg.ToString()))
        {
            //系统异常信息 输出
          @:$(function() { @(Html.Raw(errmsg)); });
        } 
        var ruleForm = { oldPasswd: '', newPasswd: '', confirmPasswd: '' };
        new Vue({
            el: "#app",
            data: function () {
                return {
                    ruleForm: ruleForm , 
                    rules: {
                        oldPasswd: [
                            { required: true, message: '请输入旧密码', trigger: 'blur' }
                        ],
                        newPasswd: [
                            { required: true, message: '请输入新密码', trigger: 'blur' }
                        ],
                        confirmPasswd: [
                            {required: true, validator: function (rule, value, callback) {
                                if (value === '') {
                                    callback(new Error('请输入确认密码'));
                                } else if (value !== ruleForm.newPasswd) {
                                    callback(new Error('两次输入密码不一致!'));
                                } else {
                                    callback();
                                }
                            }, trigger: 'blur' }
                        ]
                    }
                };
            },
            methods: {
                submitForm: function(formName) {
                    this.$refs[formName].validate(function(valid) {
                        if (valid) {
                            $("form").eq(0).submit();
                        } else {
                            return false;
                        }
                    });
                },
                resetForm: function(formName) {
                    this.$refs[formName].resetFields();
                }
            }
        })
    </script>
}